<template>
    <div class="square-search">
        <div class="search-box">
            <form class="input-box" action="#" onsubmit="return false">
                <i class="uicon uicon-search-dark search" @click="search(keyword,$event)"></i>
                <input type="search" v-model.trim="keyword" :placeholder="placeholder" @keypress.enter="search(keyword,$event)">
                <i class="uicon uicon-close" @click="clearKeyWord"></i>
            </form>
            <a @click="cancel">取消</a>
        </div>
        <!-- end search-box -->
        <div class="scroll-box" id="scroll-view" ref="scrollView">
            <div class="history-box" v-if="!is_empty">
                <a href="javascript:;" v-if="item.isShow" @click="searchItem(item)" class="hitem" v-for="(item, index) in history" :key="index">
                    <i class="uicon uicon-history"></i>
                    <span>{{ item.keyword }}</span>
                    <a href="javascript:;" @click.stop="remove(index)" class="close">&times;</a>
                </a>
                <a href="javascript:;"  class="all" @click="showAllOrClear" v-if="history.length > 2">
                    {{ isShowAll ? '全部搜索记录' : '清除历史记录' }}
                </a>
            </div>
            <div class="search-empty" v-if="is_empty">
                <div class="cont">
                    <p>抱歉，没有找到</p>
                    <p>“
                        <span>{{re_keyword}}</span>”相关内容</p>
                </div>
            </div>
            <!-- end search-empty -->
            <!-- 有搜索结果的情况 -->
            <div class="result-box" v-else>
                <scroll-list class="ui-list" v-show="list.length>0" :disabled="true" :config="scroll" @bottom="loadmore">
                    <transition-group class="index-list" name="list">
                        <square-item 
                            :id="item.id"
                            v-for="(item,index) in list" 
                            @delete="delItem(item,index)"
                            @item-share="share(item)" 
                            :item="item" 
                            @click.native="updateActive(item)"
                            :key="item.id">
                            <span slot="title" v-html="item.content"></span>
                        </square-item>
                    </transition-group>
                </scroll-list><!-- en dui-list -->
            </div>
        </div>

        <popup-more :status="moreConfig.status" :config="moreConfig" @close="moreConfig.status = false"></popup-more>

    </div>
</template>
<script>
import Items from "@/square/components/items.vue";
import MoreBox from '@/components/morebox.vue'
import ScrollList from "@/components/scrollList.vue";
import Lazy from '@/plugins/lazy.js'

export default {
    name: "square-search",
    components: {
        [ScrollList.name]: ScrollList,
        [MoreBox.name]: MoreBox,
        [Items.name]: Items
    },
    data() {
        return {
            cache_key:'SQUARE_SEARCH',
            keyword: "",
            re_keyword:'',
            page: {
                page_no: 1,
                is_end: false,
            },
            scroll: {
                target:'#scroll-view',
                bottom: false
            },
            placeholder: "搜索感兴趣的内容",
            history: [],
            lazy:'',
            list:[],
            is_empty:false,
            isShowAll: true,
            moreConfig:{
                id:'',
                status:false,
                fav:false,
                night:false,
                font:false,
                range:3,
                hideOption:true,
                email_title:'泛亚资讯 动态详情',
                email_content:' '
            },
        };
    },

    mounted () {
        // this.getInputTip();
        this.initHistoryFn();

        this.lazy = new Lazy(this.$refs.scrollView);

        let cache = this.$store.state.cache.map[this.cache_key];
        if(cache){
            this.keyword = cache.keyword;
            this.re_keyword = cache.keyword;
            this.page.page_no = cache.page_no;
            this.page.is_end = cache.page_end;
            this.list = cache.list;
            this.scroll.bottom = this.list.length == 0 ? 'hidden' : (this.page.is_end ? 'done' : false);
            cache.active && this.$nextTick(()=>{
                this.$refs.scrollView.scrollTop = cache.active;
                this.lazy.update();
            })
        }
    },

    methods: {
        share(item){
            this.moreConfig.status = true;
            this.moreConfig.email_content = item.content;
        },
        cancel(){
            this.$store.commit('delete',this.cache_key);
            this.$router.back();
        },
        loadmore(needClean = false) {
            if (this.scroll.bottom) return false;
            this.scroll.bottom = true;
            this.search(this.re_keyword,false,needClean)
        },
        go(url){
            location.href = url;
        },
        updateActive(item){
            let top = this.$refs.scrollView.scrollTop;
            this.$store.commit('updateFieldByKey',{
                key:this.cache_key,
                field:'active',
                value:top
            });
        },
        initHistoryFn () {
            let history = [];
            localStorage.getItem('square_search') ? history = JSON.parse(localStorage.getItem('square_search')) : [];
            history.forEach((item, index) => {
                index < 2 ? item.isShow = true : item.isShow = false;
            });
            this.history = history;
        },

        clearKeyWord () {
            this.keyword = '';
            // this.re_keyword = '';
            this.is_empty = false;
        },

        search (keyword,e,needClean = true) {
            if (!keyword) {
                return false;

                // if(this.placeholder){
                //     keyword = this.placeholder;
                // }else{
                //     return false;
                // }
            }
            this.re_keyword = keyword;
            let keywordHandle = '<span class="mark">' + keyword + "</span>";
            if(needClean){
                e && e.target && e.target.blur();
                this.page.page_no = 1;
                this.page.is_end = true
            }

            let params = {
                keyword,
                page_no :this.page.page_no
            }
            localStorage.getItem('square_search') ? this.history = JSON.parse(localStorage.getItem('square_search')) : '';

            if (this.history.length === 0) {
                this.history.unshift( {"keyword": keyword, isShow: true} );
            } else {
                let index;
                for(let i = 0,len = this.history.length;i<len;i++){
                    if (this.history[i].keyword === keyword) {
                        index = i;
                        break;
                    }
                }
                if(typeof index !== 'undefined'){
                    this.history.splice(index,1)
                }
                this.history.unshift( {"keyword": keyword, isShow: true});
            }
            localStorage.setItem('square_search', JSON.stringify(this.history));

            if(this.isShowAll){
                this.history.forEach((item, index) => {
                    index >=2 ? item.isShow = false : '';
                });
            }

            return this.$http.get("?ct=member_publish&ac=dynamic_list", {params}).then(response => {
                    let { data } = response;
                    if (data.code == 0) {
                        let rs = data.data;
                        this.page.is_end = !rs.is_have_data;
                        rs.list &&
                            rs.list.forEach &&
                            rs.list.forEach(item => {
                                item.content = item.content.replace(keyword,keywordHandle);
                            });

                        if (!needClean) {
                            this.list = this.list.concat(rs.list);
                        } else {
                            this.$refs.scrollView.scrollTop = 0;
                            this.list = rs.list;
                        }
                        this.page.page_no++;
                        this.$store.commit('add',{
                            key:this.cache_key,
                            value:{
                                active:'',
                                keyword:params.keyword,
                                page_end:this.page.is_end,
                                page_no:this.page.page_no,
                                list:this.list
                            }
                        });
                        this.$nextTick(() => {
                            this.is_empty = this.page.is_end && this.list.length === 0;

                            this.scroll.bottom = this.page.is_end ? 'done' : false;
                            this.lazy.update();

                        });
                    }else{
                        this.$toast(data.msg);
                    }
                });
        },

        searchItem (item) {
            this.keyword = item.keyword;
            this.page.is_end = true;
            this.search(this.keyword,false,true)
        },

        remove (index) {
            this.history.splice(index, 1);
            if (this.isShowAll) {
                this.history.forEach((item, index) => {
                    index < 2 ? item.isShow = true : item.isShow = false;
                });
            }
            // this.history.length === 0 ? this.isShowAll = true : '';
            localStorage.setItem('square_search', JSON.stringify(this.history));
            // this.initHistoryFn();
        },

        showAllOrClear () {
            if (this.isShowAll) {
                this.history.forEach(item => {
                    item.isShow = true;
                });
                this.isShowAll = false;
            } else {
                this.history = [];
                this.isShowAll = true;
                localStorage.setItem('square_search', JSON.stringify(this.history));
            }
        },
        delItem(item,index){
            this.list.splice(index,1);
            this.$store.commit('deleteFieldByKey',{
                key:this.cache_key,
                field:'id',
                value:item.id
            });
        }

    } // methods end
};
</script>
<style lang="less">

.square-search {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    background-color: #f6f6f6;

    .search-box {
        display: flex;
        align-items: center;
        padding-top: 14px;
        padding-bottom: 14px;
        height: 60px;
        box-sizing: content-box;
        .input-box {
            display: flex;
            flex: 1;
            align-items: center;
            height: 100%;
            padding: 14px 30px 14px 20px;
            background-color: #f6f6f6;
            border-radius: 30px;

            .search {
                margin-right: 12px;
            }

            input {
                background-color: transparent;
                border: none;
                outline: none;
                flex: 1;
                color: #282828;
                font-size: 28px;
                line-height: normal;
                caret-color: #e64a19;
                -webkit-appearance:none;
                &::-webkit-input-placeholder {
                    color: #c6c6c6;
                }
                &::-webkit-search-cancel-button{
                    display: none;
                }
            }
        }

        a {
            padding-left: 30px;
            font-size: 30px;
            color: #e64a19;
        }
    }
    .scroll-box {
        flex: 1;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .history-box,
    .search-box,
    .list-box {
        background-color: #fff;
        padding-left: 30px;
        padding-right: 30px;
    }

    .history-box {
        .hitem,
        .all {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .close {
            color: #dcdcdc;
            padding: 0 20px;
        }
        .hitem {
            font-size: 32px;
            height: 80px;
            color: #282828;
            box-sizing: content-box;
            span {
                margin-left: 20px;
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            & + .hitem {
                border-top: 1px solid #eeeeee;
            }
        }
        .all {
            border-top: 1px solid #eeeeee;
            font-size: 30px;
            height: 90px;
            color: #919191;
        }
    }
    .result-box {
        margin-top: 10px;
    }

    .list {
        a {
            display: block;
            line-height: 90px;
            height: 90px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 32px;
            color: #282828;

            & + a {
                border-top: 1px solid #eee;
            }
        }
    }

    .search-empty {
        padding-bottom: 66px;
        height: 495px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        background-color: #fff;
        background-size: 690px 248px;
        background-image: url(../../assets/search-empty.jpg);
        background-repeat: no-repeat;
        background-position: center 80px;

        p {
            text-align: center;
            font-size: 32px;
            color: #282828;
            line-height: 42px;

            span {
                color: #e64a19;
            }
        }
    }

    .result-box {
        .result-item {
            padding: 0 24px;
            background: #fff;
        }
        .classify {
            padding: 30px 0 20px;
            font-size: 36px;
            line-height: 1;
            font-weight: bold;
            color: #282828;
        }
       
        .mark {
            color: #e64a19;
        }
        
        .view-more {
            display: inline-block;
            width: 100%;
            text-align: center;
            font-size: 30px;
            color: #5a4640;
            padding-top:10px;
            padding-bottom:30px;
            i {
                position: relative;
                top: 2px;
                display: inline-block;
                width: 26px;
                height: 26px;
                background-size: 100% 100%;
            }
        }

        ul {
            li:last-child a{
                border: 0;
            }
        }
    }
}
</style>


